/**
 * MapSceneShow
 * 使用了@esri/react-arcgis
 * 使用的是ags api 4.11 版本
 * 使用esri arcgis scene展示三维地图效果
 * 中间使用了Map中layers的各种自定义图层
 */
import React, { Component } from 'react';
import { Scene } from '@esri/react-arcgis';
import { loadCss } from 'esri-loader';
import MyAGSTileLayer from '../layers/MyAGSTileLayer';
import MyGeojsonLayer from '../layers/MyGeojsonLayer';

loadCss('https://ags.geoportal.cn/4.11/esri/themes/light/main.css');

class MapScene extends Component{
    render() {
        const loaderOptions = { url: 'https://ags.geoportal.cn/4.11/dojo/dojo.js' };
        return (
            <Scene style={{ width: '100%', height: '550px' }} mapProperties={{ basemap: 'streets' }}
                viewProperties={{ center: [121.4443, 39.2529], zoom: 3 }} loaderOptions={loaderOptions}>
                <MyAGSTileLayer agsTileLayerProperties={{ url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer' }} />
                <MyGeojsonLayer geojsonLayer={{
                    url: '/api/cities',
                    popupTemplate: {
                        title: "City Info",
                        content: "这是 {name}"
                    }
                }}></MyGeojsonLayer>
            </Scene>
        );
    }
}
export default MapScene;